<template>
  <div class="rd-editor-resize-container" ref="container">
    <slot></slot>
    <resize-block v-for="(item, index) in position" :key="'rd-editor-resize-block-' + index" :position="item" :target="targetDom" :min-width="minWidth" :max-width="maxWidth" :min-height="minHeight" :max-height="maxHeight"></resize-block>
  </div>
</template>

<script>
import './resize-container.less'
import { positionArrays } from './constant'
import ResizeBlock from './resize-block'

export default {
  name: 'ResizeContainer',
  components: {
    ResizeBlock
  },
  props: {
    // 需要展示的伸缩框
    position: {
      type: Array,
      default: () => positionArrays,
      validator: value => value.every(item => positionArrays.indexOf(item) !== -1)
    },
    // 父元素中需要改变dom的ref名称
    refName: {
      type: String
    },
    // 最小宽度
    minWidth: {
      type: Number,
      default: 0
    },
    // 最大宽度
    maxWidth: {
      type: Number,
      default: 0
    },
    // 最小高度
    minHeight: {
      type: Number,
      default: 0
    },
    // 最大高度
    maxHeight: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 目标dom
      targetDom: null
    }
  },
  methods: {
    // 初始化
    init() {
      let temp = this.$refs.container
      if (this.refName && this.$parent.$refs[this.refName]) {
        temp = this.$parent.$refs[this.refName]
      }
      this.targetDom = temp
    }
  },
  mounted() {
    this.init()
  }
}
</script>
